import React, {useState,useEffect} from 'react';
import { usePro, useTitle, useQueryId } from './22-my-hooks';
// 自定义 hooks 中可以有参数，可以无参数
// 可以有返回值，也可以无返回值
// 自定义 hooks 中可以嵌套 hooks
// hooks 只能在函数式组件中调用
// 所谓的自定义 hooks 其实可以理解为函数的封装
function useBanner(){

  const [bannerList,setBannerList] = useState([])
  useEffect(()=>{
    fetch('http://121.89.205.189:3000/api/banner/list').then(res => res.json()).then(res => {
      console.log(res.data);
      setBannerList(res.data)
    })
  }, [])

  return bannerList
}

const App = () => {

  const bannerList = useBanner()

  const bannerHtml = bannerList.map(item => {
    return (<img key={item.bannerid} src={item.img} alt='' style={{width: 80}} />)
  })

  const {proList} = usePro(15)

  const proHtml = proList.map(item => (
    <li key={item.proid}> {item.proname} </li>
  ))

  useTitle('一个自定义 hooks ')

  const dom = useQueryId('root')
  console.log(dom);

  /*
    通过自定义 Hook,可以将组件的业务逻辑提取到可以重用的函数中
    自定义的 Hook 是一个函数，其名称以 “use” 开头，函数内部是可以调用其他 Hook 的
    自定义 Hook 是一种遵循 Hook 设计约定，而并不是 React 的特性
  */
  return (
    <div>

      {bannerHtml}

      <ol>
        {proHtml}
      </ol>

    </div>
  );
};

export default App;
